<script setup lang="ts">
 import { reactive, ref } from 'vue' //导入vue相关函数
    import type { FormInstance } from 'element-plus' //导入表单实例类型
    import { ElMessage } from 'element-plus' //导入消息框
    import { useRouter } from "vue-router" //导入路由useRouter函数
    import { login } from '@/api' //导入axios接口
    import { useToken } from '@/stores/token' //导入token状态文件
    import { useAdmin } from '@/stores/admin' //导入admin状态文件

//表单提交
    const checkLogin = async ()=>{
        await formRef.value?.validate(async (valid, _fields)=>{
            if(valid){
                //登录验证
                const res = await login(user)
                //判断登录状态
                if(res.data.errno == 0){
                    //更新token状态
                    tokenStore.updateToken(res.data.data.token)
                    //更新用户状态
                    await adminStore.updateAdmin()
                    //登录成功
                    ElMessage({type:"success", message:res.data.errmsg})
                    //进入后台首页
                    router.push("/")
                }
                else{
                    //登录失败
                    ElMessage({type:"error", message:res.data.errmsg})
                }
            }
        })
    }
</script>

<template>
  <section>
    <!--Logo-->
    <header><img src="@/assets/images/EasyGo_Logo.png" /></header>

    <!--登录表单-->
    <section class="content">
      <div>
        <div>管理员登录</div>
        <div>
          <el-form
            ref="formRef"
            label-width="80px"
            label-position="right"
            status-icon
          >
            <el-form-item label="登录名称" prop="username">
              <el-input />
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
              <el-input type="password" />
            </el-form-item>
            <el-form-item label-width="120px">
              <el-button type="primary" @click="">登录</el-button>
              <el-button @click="">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </section>
  </section>
</template>

<style scoped>
section {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 1000px;
  margin: 0px auto;
}
header img {
  width: 130px;
  height: 80px;
}
.content {
  width: 100%;
  min-width: 1000px;
  background: url("@/assets/images/Login_Backgroud.jpg") no-repeat center/cover;
  position: relative;
}
.content > div {
  width: 400px;
  background: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-10%, -60%);
}
.content > div > div:first-child {
  font-size: 20px;
  text-align: center;
  line-height: 70px;
  border-bottom: 1px solid #edf0f0;
}
section > div > div:last-child {
  padding: 20px 20px 0px 20px;
}
</style>
